<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
    <style>
        .layui-carousel{
            height: 650px !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto; ">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" id="from1" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">基金名称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="fundName" placeholder="请填写入基金名称" class="layui-input"  required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">基金缩写:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="fundAbbrevation" placeholder="请填基金缩写"  class="layui-input"  required/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">基金代码:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="fundNumber" placeholder="请填写基金代码"  class="layui-input" lay-verify="number" required/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">基金类型:</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required" id="fundType">
                                                <option value="1" selected>混合型</option>
                                                <option value="2">股票型</option>
                                                <option value="3">债券型</option>
                                                <option value="4">指数型</option>
                                                <option value="5">FOF型</option>
                                                <option value="6">QDII型</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">风险等级:</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required" id="raskRating">
                                                <option value="1" selected>一级风险</option>
                                                <option value="2">二级风险</option>
                                                <option value="3">三级风险</option>
                                                <option value="4">四级风险</option>
                                                <option value="5">五级风险</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">产品描述:</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="产品描述" id="description" value="" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">基金全称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="fullName" placeholder="请填写入基金全称" class="layui-input"  required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">资产规模:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="asset" placeholder="请填写入资产规模" class="layui-input"  required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">资产管理人:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="fundManager" placeholder="请填写入资产管理人" class="layui-input"  required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">资产托管人:</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="fundTrustee" placeholder="请填写入资产托管人" class="layui-input"  required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">产品经理</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo3" style="width: 350px;">
                                            <input type="hidden" name="productManagerId" id="productManagerId"  class="layui-input">
                                        </div>
                                    </div>
                                    
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">投资理念:</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="投资理念" id="investmentPhilosophy" value="" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">投资策略:</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="投资策略" id="investmentStrategy" value="" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle" id="emoji"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div id="message" style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                    </div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再入一笔</button>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <hr>
                    <!-- <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                        <h3>说明</h3><br>
                        <h4>入款到保险箱</h4>
                        <p>如果需要，这里可以放一些关于产品的常见问题说明。</p>
                        <br><h4>入款到现金</h4>
                        <p>如果需要，这里可以放一些关于产品的常见问题说明。</p>
                    </div> -->
                </div>
            </div>
        </div>

    </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../js/jquery/jquery-2.1.4.js"></script>
<script src="../../js/common/constant.js"></script>
<script>
    layui.use([ 'form', 'step', 'tableSelect', 'laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step,
            tableSelect = layui.tableSelect;
            var url = getRootPath();
            
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '填写基金基本信息'
            }, {
                title: '填写基金档案信息'
            }]
        });
        tableSelect.render({
            elem: '#demo3',
            checkedKey: 'id',
            height:'200',
            width:'450',
            searchType: 'more',
            
            searchList: [
                {searchKey: 'empName', searchPlaceholder: '搜索用户姓名'},
                {searchKey: 'empSex', searchPlaceholder: '搜索用户性别'},
            ],
            table: {
                url: url+'/web/product-manager/get',
                response: {
                statusCode: 200  //设置返回值状态码的默认值
                },
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: 'ID' },
                    { field: 'name', title: '姓名' },
                    { field: 'introduce', title: '简介' }
                ]],
                limit:6
            },
            done: function (elem, data) {
                var NEWJSON = []
                var list = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.name)
                    list.push(item.id)
                })
                elem.val(NEWJSON.join(","))
                $("#productManagerId").val(list)
            }
        })

        form.on('submit(formStep)', function (data) {
            
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            
            $.ajax({
                type: "post",
                url: url+"/web/fundinfo/add",
                data: {
                    fundName: $("#fundName").val(),
                    fundAbbrevation: $("#fundAbbrevation").val(),
                    fundNumber: $("#fundNumber").val(),
                    fundType: $("#fundType").val(),
                    raskRating: $("#raskRating").val(),
                    description: $("#description").val(),
                    fullName: $("#fullName").val(),
                    asset: $("#asset").val(),
                    fundManager: $("#fundManager").val(),
                    fundTrustee: $("#fundTrustee").val(),
                    productManagerId: $("#productManagerId").val(),
                    investmentPhilosophy: $("#investmentPhilosophy").val(),
                    investmentStrategy: $("#investmentStrategy").val()
                },
                success: function (response) {
                    alert(response.message),
                    location.reload()
                }
                
            });
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    })

</script>
</body>
</html>